<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
    <head>
        <th:block th:include="include :: header('文档查看')"/>

        <style>
            .pdf-div {
                width: 1000px;
                margin: auto;
            }

            .adds {
                line-height: 2em;
                padding: 4px;
                text-align: center;
                font-weight: bold;
            }
        </style>
    </head>
    <body class="white-bg">
        <div class="adds">
            <div>[[${courseDetail.title}]]</div>
            <div style="display: none">[[${courseDetail.host + courseDetail.pptUrl}]]</div>
        </div>
        <div>
            <div class="pdf-div">
                <!--                <a class="media" th:href="${courseDetail.host + courseDetail.pptUrl}"></a>-->
                <div>
                    <button id="prev">上一页</button>
                    <button id="next">下一页</button>

                    <span>Page: <span id="page_num"></span> / <span id="page_count"></span></span>
                </div>

                <div style="width:100%;height:100%;background:#404040">
                    <div style=" width:1000px;margin: 0 auto;">
                        <canvas id="the-canvas"></canvas>
                    </div>
                </div>
            </div>
        </div>


        <th:block th:include="include :: footer"/>
        <th:block th:include="include :: pdf-js"/>
        <script type="text/javascript">
            var url = '[[${courseDetail.host + courseDetail.pptUrl}]]'
            console.log(url)
            $(function () {
                var PDFJS          = window.pdfjsLib;
                var url            = url;  //你要显示的pdf文件
                PDFJS.workerSrc    = '/ajax/libs/pdfjs/pdf.worker.js';
                var pdfDoc         = null,
                    pageNum        = 1,
                    pageRendering  = false,
                    pageNumPending = null,
                    scale          = 1,
                    canvas         = document.getElementById('the-canvas'),
                    ctx            = canvas.getContext('2d');

                function renderPage(num) {
                    pageRendering = true;
                    pdfDoc.getPage(num).then(function (page) {
                        var viewport       = page.getViewport(1);
                        var desiredWidth   = "1000";
                        var scale          = desiredWidth / viewport.width;
                        var scaledViewport = page.getViewport(scale);
                        canvas.height      = scaledViewport.height;
                        canvas.width       = scaledViewport.width;
                        var renderContext  = {
                            canvasContext: ctx,
                            viewport: scaledViewport
                        };
                        var renderTask     = page.render(renderContext);

                        renderTask.promise.then(function () {
                            pageRendering = false;
                            if (pageNumPending !== null) {
                                renderPage(pageNumPending);
                                pageNumPending = null;
                            }
                        });
                    });
                    //显示总页数
                    document.getElementById('page_num').textContent = pageNum;
                }

                //翻页方法
                function queueRenderPage(num) {
                    if (pageRendering) {
                        pageNumPending = num;
                    } else {
                        renderPage(num);
                    }
                }

                function onPrevPage() {
                    if (pageNum <= 1) {
                        return;
                    }
                    pageNum--;
                    queueRenderPage(pageNum);
                }

                //上一页监听
                document.getElementById('prev').addEventListener('click', onPrevPage);

                function onNextPage() {
                    if (pageNum >= pdfDoc.numPages) {
                        return;
                    }
                    pageNum++;
                    queueRenderPage(pageNum);
                }

                //下一页监听
                document.getElementById('next').addEventListener('click', onNextPage);

                PDFJS.getDocument(url).then(function (pdfDoc_) {
                    pdfDoc = pdfDoc_;
                    console.log(pdfDoc)
                    document.getElementById('page_count').textContent = pdfDoc.numPages;

                    renderPage(pageNum)
                })
            })
        </script>
    </body>
</html>